<template>
  <div class="search-public-body f-l">
    <button class="btn btn-info" @click="searchShowFn">搜索</button>

    <transition
      name="custom-classes-transition"
      enter-active-class="animated fadeInUp"
      leave-active-class="animated fadeOutDown"
    >
      <div class="condition-box" v-show="searchShow">
        <div class="condition">
          <div class="search-list-body">

            <!--预案专用-->
            <div class="search-list"
                 v-for=" item in searchObj.condition "
                 :class="{'select-three':item.type==='selectThree'}"
                 v-if=" item.type==='selectThree' && searchObj.htmlType==='caseList' "
            >
              <span class="title">案件类型</span>
              <select @change="caseTypeListFn" v-model="caseObj.params.caseType">
                <option value="">请选择案件类型</option>
                <option v-for="item in caseObj.caseTypeList" :value="item.id">{{item.name}}</option>
              </select>
              <span class="title">案件性质</span>
              <select @change="caseNatureListFn" v-model="caseObj.params.caseNature">
                <option value="">请选择案件性质</option>
                <option v-for="item in caseObj.caseNatureList" :value="item.id">{{item.name}}</option>
              </select>
              <span class="title">案件细分</span>
              <select @change="caseNatureDetailsFn" v-model="caseObj.params.natureDetails">
                <option value="">请选择案件细分</option>
                <option v-for="item in caseObj.natureDetailsList" :value="item.id">{{item.name}}</option>
              </select>
            </div>
            <!--以上为预案专用搜索-->

            <!--    {{searchObj}}-->
            <div class="search-list"
                 v-for=" item in searchObj.condition"
                 v-if="searchObj.htmlType==='searchDefaultPublic'"
            >

              <span class="title">{{item.title}}</span>
              <!-- 部门下拉 -->
              <input
                :type="item.type === 'treeSection' ? 'hidden' : 'text' "
                v-model="item.value" v-if="item.type==='text'">
              <input type="text"
                     v-model="sectionName"
                     @click="sectionTreeFn(item,item.data)"
                     v-show="item.type === 'treeSection'"
                     readonly="readonly"
              >
              <div class="search-more-body"
                   v-show="sectionTreeIShow"
                   v-if="item.type === 'treeSection'">
                <div class="sectionTree">
                  <div id="sectionSearchTree" class="ztree sectionTree-box"></div>
                </div>
              </div>

              <!--静态选择-->
              <select v-if="item.type==='select'" v-model="item.value" @change="select($event,item)">
                <option v-for=" optionItem in item.data " :value="optionItem.value">
                  {{optionItem.key}}
                </option>
              </select>
              <!--接口选择-->
              <select v-if="item.type==='selectApi'" v-model="item.value" @change="select($event,item)">
                <option value="">请选择</option>
                <option v-for=" optionItem in item.data " :value="optionItem.areaCode">
                  {{optionItem.areaName}}
                </option>
              </select>

              <!--车辆选择-->
              <select v-if="item.type==='selectCar'" v-model="item.value" @change="select($event,item)">
                <option value="">请选择</option>
                <option v-for=" optionItem in item.data " :value="optionItem.ID">
                  {{optionItem.TYPE}}
                </option>
              </select>

              <!--警员类型选择-->
              <select v-if="item.type==='selectPoliceType'" v-model="item.value" @change="select($event,item)">
                <option value="">请选择</option>
                <option v-for=" optionItem in item.data " :value="optionItem.id">
                  {{optionItem.type}}
                </option>
              </select>
            </div>
            <div class="search-list"
                 v-for=" (item, index) in searchObj.condition"
                 v-if="searchObj.htmlType === 'searchTime'">
              <span class="title">{{item.title}}</span>
              <input v-model="item.value" v-if="item.type==='text'">
              <div class="time-select-wrap" >
                <!-- startTime -->
                <div class="input-group date time-item "
                     v-if="item.type === 'startTime'"
                     id="startTimeId">
                  <input type="hidden" :data-index="index" name="birthday">
                  <input type="text" readonly="readonly" id="datetimepicker" class="form-control input-time-show" required="required" data-date-format="dd-mm-yyyy">
                  <span class="input-group-addon span-time-icon">
                    <span class="glyphicon glyphicon-calendar"></span>
                  </span>
                </div>

                <!-- startTime end-->
                <!-- endTime -->
                <div class="input-group date time-item "
                     v-if="item.type === 'endTime'"
                     id="endTimeId">
                  <input type="hidden" :data-index="index" name="birthday">
                  <input type="text" readonly="readonly" id="endDatetimepicker" class="form-control input-time-show" required="required" data-date-format="dd-mm-yyyy">
                  <span class="input-group-addon span-time-icon">
            <span class="glyphicon glyphicon-calendar"></span>
          </span>
                </div>
                <!-- endTime end-->
              </div>
            </div>

          </div>

          <div class="Btns-ctrl-body">
            <div class="btns f-r">
              <button type="button" class="btn btn-default" @click="closeSearch">关闭</button>
              <button type="button" class="btn btn-warning" @click="clearSearchSelect">清除条件</button>
              <button type="button" class="btn btn-info" @click="searchSub">搜索</button>
            </div>
          </div>
        </div>
      </div>
    </transition>

  </div>
</template>

<script>
    export default {
        name: "refreshSearch",
        props:['searchObj'],
        data(){
          return{
            caseObj:{
              caseTypeList:[],//一级类型
              caseNatureList:[],//二级类型
              natureDetailsList:[],//三级类型
              caseTypeAll:[],
              params:{'caseType':'','caseNature':'','natureDetails':''}
            },
            searchShow:false,
            settingSearchMore : {
              data: {
                simpleData: {
                  enable: true
                },
              }
            },
            treeObj:{},
            sectionName:"",
            sectionTreeIShow:false,
            indexStartTime: '',
            indexEndTime: '',
          }
        },
        watch:{
          searchShow(v1){
            ////console.log(v1);
            if( v1 ){
              if( this.searchObj.htmlType === "caseList" ){ //预案专用
                this.setCaseType();
              }
              if(this.searchObj.htmlType === "searchTime"){
                let self = this
                this.$nextTick(function () {
                  self.initTimeControl(); // 初始化时间控件
                })
              }
            }
          }
        },
        created(){
          let _this = this;
          this.settingSearchMore.callback = {
            onClick:function(event,treeId,treeNode){ //新增警员部门树选择
              //console.log(treeNode);
              _this.treeObj.value = treeNode.id;
              _this.sectionName = treeNode.name;
              _this.sectionTreeIShow = !_this.sectionTreeIShow;
            }
          }
        },
        methods:{
          //预案三级联动
          setCaseType(){
            ////console.log(this.searchObj);
            this.caseObj.caseTypeAll = this.searchObj.condition[0].data;
            ////console.log(this.caseObj.caseTypeAll);
            for( let i=0;i<this.caseObj.caseTypeAll.length;i++ ){
              switch (this.caseObj.caseTypeAll[i].type){
                case "case_type": //一级类型
                  this.caseObj.caseTypeList.push(this.caseObj.caseTypeAll[i]);
                  break;
              }
            }
          },
          //一级类型选择
          caseTypeListFn(ele){
            this.caseObj.params.caseType = ele.target.value;
            let caseTypeId = ele.target.value;
            let caseListArr = [];//二级类型集合
            //console.log(caseTypeId);
            for( let i=0;i<this.caseObj.caseTypeAll.length;i++ ){ //二级赋值赋值
              if( this.caseObj.caseTypeAll[i].parentId && this.caseObj.caseTypeAll[i].parentId === caseTypeId ){
                caseListArr.push(this.caseObj.caseTypeAll[i]);
              }
            }

            this.caseObj.caseNatureList = caseListArr;
            this.caseObj.params.caseNature = ""; //清空二级类型
            this.caseObj.params.natureDetails = ""; //清空三级类型
            this.caseObj.natureDetailsList = []; //清空三级类型列表
          },
          //二级类型选择
          caseNatureListFn(ele){
            this.caseObj.params.caseNature = ele.target.value;
            let caseTypeId = ele.target.value;
            let caseListArr = [];//二级类型集合
            for( let i=0;i<this.caseObj.caseTypeAll.length;i++ ){ //三级类型赋值
              if( this.caseObj.caseTypeAll[i].parentId && this.caseObj.caseTypeAll[i].parentId === caseTypeId ){
                caseListArr.push(this.caseObj.caseTypeAll[i]);
              }
            }
            //三级类型赋值
            this.caseObj.natureDetailsList = caseListArr;
          },
          //三级类型
          caseNatureDetailsFn(ele){
            this.caseObj.params.natureDetails = ele.target.value;
          },
          //选择所属单位
          sectionTreeFn(treeObj,treeData){
            this.sectionTreeIShow = !this.sectionTreeIShow;
            if( this.sectionTreeIShow ){
              this.treeObj = treeObj;
              $.fn.zTree.init($("#sectionSearchTree"), this.settingSearchMore, treeData);
            }
          },
          //选择框静态选择
          select(ele,item){
            //console.log(ele.target.value);
            //console.log(item);
            item.value = ele.target.value;
          },
          //搜索提交
          searchSub(){
            if( this.searchObj.htmlType === "caseList" ){ //预案
              this.$emit('searchParams',this.caseObj.params)
            }else if( this.searchObj.htmlType === "searchDefaultPublic" ){ //预案
              this.$emit('searchParams');
              ////console.log(this.searchObj);
            } else if( this.searchObj.htmlType === "searchTime" ){ //时间
              this.$emit('searchParams');
              //console.log(this.searchObj);
            }
            this.searchShowFn();
          },
          //重置搜索条件
          clearSearchSelect(){
            if( this.searchObj.htmlType === "caseList" ){ //预案
              this.caseObj={
                  params:{'caseType':'','caseNature':'','natureDetails':''}
              }
            }else{
              for( let i=0;i<this.searchObj.condition.length;i++ ){
                this.searchObj.condition[i].value = "";
              }
            }
            if( this.treeObj ){
              this.treeObj.value = "";
              this.sectionName = "";
              this.treeObj = {}
            }
            if (this.searchObj.htmlType === "searchTime") { //时间
              this.clearTime()
            }
            this.searchSub();
          },
          clearTime() {
            this.searchObj.condition.map(item => {
              if (item.type !== 'startTime' || item.type !== 'endTime') {
                item.value = ''
              }
            })
            if($('#datetimepicker')[0]) {
              $('#datetimepicker')[0].value = ''
            }
            if($('#endDatetimepicker')[0]) {
              $('#endDatetimepicker')[0].value = ''
            }
          },
          //关闭弹窗
          closeSearch(){
           /* if( this.searchObj.htmlType === "caseList" ){ //预案
              this.caseObj={
                caseTypeList:[],//一级类型
                caseNatureList:[],//二级类型
                natureDetailsList:[],//三级类型
                caseTypeAll:[],
                params:{'caseType':'','caseNature':'','natureDetails':''}
              };

            }*/
           this.sectionTreeIShow = false;
            this.searchShowFn();
          },
          clearCaseData(){
            if( this.searchObj.htmlType === "caseList" ){
              this.caseObj.caseTypeList = [];
            }

          },
          //搜索展开
          searchShowFn(){
            this.searchShow = !this.searchShow;
            if(this.searchShow) {
              this.$emit('searchShow')
            }
            this.clearCaseData();
          },
          // 时间控件初始化
          initTimeControl(){
            let self = this;
            $(function () {
              if($('#startTimeId').length){
                $('#startTimeId').datetimepicker({
                  language: "zh-CN",
                  format: "yyyy-mm-dd hh:ii:ss",
                  endDate: new Date(),
                  // minView: "month",
                  autoclose: true
                }).on("changeDate",function(ev){
                  let value = ev.target.firstElementChild.value;
                  self.indexStartTime = ev.target.firstElementChild.getAttribute('data-index')
                  self.searchObj.condition[self.indexStartTime].value = value
                  if($('#endTimeId').length){
                    $('#endTimeId').datetimepicker('setStartDate',value);
                  }
                });
              }
              if($('#endTimeId').length){
                $('#endTimeId').datetimepicker({
                  language: "zh-CN",
                  format: "yyyy-mm-dd hh:ii:ss",
                  endDate: new Date(),
                  // minView: "month",
                  autoclose: true
                }).on("changeDate",function(ev){
                  let value = ev.target.firstElementChild.value;
                  self.indexEndTime = ev.target.firstElementChild.getAttribute('data-index')
                  self.searchObj.condition[self.indexEndTime].value = value
                  if($('#startTimeId').length){
                    $('#startTimeId').datetimepicker('setEndDate', value);
                  }
                });
              }
            });

          },
        }
    }
</script>

<style scoped lang="scss">
  .fadeInUp,.fadeOutDown{
    animation-duration: .500s;
  }
.search-public-body{
  position: relative;
  .btn-info{
    height: 30px;
    padding: 0 10px;
    border-radius: 4px;
  /*  margin-left: 8px;*/
  }
  .condition-box{
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 11;
    left: 0;
    top: 0;
    background-color: rgba(255,255,255,0);
  }
  .condition{
    position: fixed;
    z-index: 5;
    left: 50%;
    top: 40%;
    margin-left: -385px;
    background-color: #fff;
    width: 960px;
    box-sizing: border-box;
    padding: 15px;
    box-shadow: 2px 3px 7px 2px rgba(51, 51, 51, 0.2);
    border-radius: 4px;
    .search-list-body{
      width: 100%;
      height: auto;
      &:after{
        content: " ";
        display: block;
        overflow: hidden;
        height: 0;
        clear: both;
      }
    }
    .search-list{
      float: left;
      width: 300px;
      box-sizing: border-box;
      margin-right: 10px;
      margin-bottom: 15px;
      position: relative;
      input[readonly=readonly]{
        cursor: pointer;
      }
      &.select-three{
        width: 100%;
        .title{
          box-sizing: border-box;
          padding-left: 5px;
        }
      }
      &.select-two{
        width: 66.66%;
      }
      span.title{
        display: inline-block;
        float: left;
        line-height: 30px;
        width: 100px;
      }
      input,select{
        float: left;
        width: 200px;
        height: 30px;
        box-sizing: border-box;
        padding-left: 5px;
        border-radius: 4px;
      }
      input{
        border: 1px solid rgba(51,51,51,0.5);
      }
      .time-select-wrap {
        .send-time {
          font-size: 14px;
          line-height: 34px;
        }
        .send-time-title {
          margin-right: 20px;
        }
        .time-item {
          width: 200px;
          float: left;
          input {
            border: 1px solid rgba(51, 51, 51, 0.5);
            width: 160px;
          }
        }

        .input-time-show {
        }
        .span-time-icon {
          border: none;
          background: transparent;
          border: 1px solid rgba(51, 51, 51, 0.5);
        }
      }
    }
    //更多搜索
    .search-more-body{
      position: absolute;
      right: 0;
      width: 200px;
      height:auto;
      top: 30px;
      background-color: #fff;
      z-index: 10;
      border: 1px rgba(51,51,51,0.3) solid;
      .sectionTree{
        height: 200px;
        overflow: auto;
      }
      .search-text{
        height: 30px;
        margin-top: 5px;
        border-bottom: 1px rgba(51,51,51,0.2) solid;
        border-left: 0 ;
        border-top: 0 ;
        border-right: 0 ;
        &:last-child{
          margin-bottom: 5px;
        }
      }
      .btn{
        padding: 6px 10px;
        float: right;
        margin: 5px;
      }
    }
  }
}

</style>
